// import React from 'react'
import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts/core';
import { useEffect, useRef } from 'react';
import './index.less';
import addCommas from '@/utils/addCommas';

// const dottedBase = [];

// const lineData = [200, 1300, 700, 1300, 600, 1000];
// const barData = [1000, 600, 1400, 1100, 1300, 1300, 600, 1100, 1300, 1100, 1300, 1100, 1300];

export default function DayRevenueData(props: {
  payableAmountList: number[];
  paymentAmountList: number[];
}) {
  let charEle: echarts.EChartsType;
  const { payableAmountList, paymentAmountList } = props;
  const chartRef: any = useRef(null); //拿到eCharts容器
  const max = Math.max(...payableAmountList);
  const blockData: number[] = [];
  const timeData = [
    '00:00',
    '01:00',
    '02:00',
    '03:00',
    '04:00',
    '05:00',
    '06:00',
    '07:00',
    '08:00',
    '09:00',
    '10:00',
    '11:00',
    '12:00',
    '13:00',
    '14:00',
    '15:00',
    '16:00',
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00',
    '23:00',
  ];
  // const biggest = Math.max(...payableAmountList);
  const height = parseInt(String(max / 40));
  // console.log(height);
  payableAmountList.forEach(() => {
    blockData.push(height);
  });
  const MyCubeRect2 = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 350, // 长方体宽
      zWidth: 8, // 阴影折角宽
      zHeight: 4, //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x, shape.y];
      const p1 = [shape.x - shape.width / timeData.length, shape.y];
      const p4 = [shape.x + shape.width / timeData.length, shape.y];
      const p2 = [xAxisPoint[0] - shape.width / timeData.length, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / timeData.length, xAxisPoint[1]];

      ctx.moveTo(p0[0], p0[1]); //0
      ctx.lineTo(p1[0], p1[1]); //1
      ctx.lineTo(p2[0], p2[1]); //2
      ctx.lineTo(p3[0], p3[1]); //3
      ctx.lineTo(p4[0], p4[1]); //4
      ctx.lineTo(p0[0], p0[1]); //0
      ctx.closePath();
    },
  });
  echarts.graphic.registerShape('MyCubeRect2', MyCubeRect2);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255,255,255,0.1)',
      axisPointer: {
        type: 'shadow',
        label: {
          // color: 'fff',
          show: true,
          backgroundColor: '#159AFF',
        },
      },
      textStyle: {
        color: '#159AFF',
      },
    },
    grid: {
      top: '15%',
      right: '6%',
      left: '5%',
      bottom: '12%',
    },
    legend: {
      textStyle: {
        color: '#D0DEEE',
      },
      right: '0%',
      top: '0%',
      itemWidth: 8,
      itemHeight: 8,
      data: [
        {
          name: '订单金额',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            width: 8,
            height: 8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#159AFF' },
              { offset: 0.4, color: 'rgba(0, 58, 255, 0.3)' },
              { offset: 1, color: '#159AFF' },
            ]),
            // shadowColor: '#159AFF',
            // shadowOffsetY: 2,
          },
        },
        {
          name: '实付金额',
          icon: 'path://M0 0H8V2H0V0Z',
          itemWidth: 8,
          itemHeight: 1,
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#D0DEEE',
          },
        },
      ],
    },
    xAxis: {
      type: 'category',
      // name: '',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#B4B4B4',
        },
      },
      interval: 3,
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
        interval: 2,
        areaStyle: {
          color: '#6C8097',
          opacity: 0.1,
        },
      },
      data: timeData,
    },
    yAxis: [
      {
        type: 'value',
        name: '金额（元）',
        min: 0,
        max: max + 10,
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.1)',
            type: 'dashed',
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#B4B4B4',
          },
        },
        splitNumber: parseInt(String((max - 0) / 500)),
        axisLabel: {
          formatter: function (params: any) {
            // console.log(params);
            return addCommas(params);
          },
        },
      },
      {
        show: false,
        max: max,
        splitLine: { show: false },
        // axisLine: {
        //   lineStyle: {
        //     color: '#B4B4B4',
        //   },
        // },
        axisLabel: {
          // formatter: function (params) {
          //   console.log(params);
          // },
        },
      },
    ],
    series: [
      {
        name: '订单金额',
        type: 'bar',
        stack: 'orderMoney',
        // xAxisIndex: 0,
        // yAxisIndex: 0,
        barWidth: 16,
        barGap: '30%',
        // barCategoryGap: '10%',
        tooltip: {
          show: true,
        },
        // areaStyle: {},
        // showBackground: true,
        // backgroundStyle: {
        //   borderWidth: 10,
        // },
        label: {
          show: true,
          position: 'top',
          fontSize: 14,
          distance: 8,
          textStyle: {
            color: '#fff',
          },
        },
        // barGap: '20%',
        // barCategoryGap: '30%',
        // barGap: '-100%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 58, 255, 0.0001)' },
              { offset: 1, color: '#159AFF' },
            ]),
          },
        },
        zlevel: 10,
        data: payableAmountList.map((item) => item.toFixed(2)),
      },
      {
        name: '订单金额',
        type: 'bar',
        stack: 'orderMoney',
        barWidth: '15%',
        barGap: '50%',
        itemStyle: {
          normal: {
            color: '#159AFF',
          },
        },
        tooltip: {
          show: false,
        },
        data: blockData,
      },
      {
        name: '',
        type: 'custom',
        tooltip: {
          show: false,
        },
        renderItem: (params: any, api: any) => {
          // console.log(api.value(0), api.value(1), '===>这个是数据项值');
          const location = api.coord([api.value(0), api.value(1)]);
          // console.log(location, '位置值');
          return {
            type: 'group',
            children: [
              {
                type: 'MyCubeRect2',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                },
                style: {
                  fill: '#333', // 0% 处的颜色
                  opacity: 0.3, //透明度,
                }, //api.style() 继承原本样式
              },
            ],
          };
        },
        data: [
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
          max + 10,
        ],
      },
      {
        name: '实付金额',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: '#fff',
          //   borderColor: '#fff',
          //   borderWidth: 3,
          shadowColor: 'rgba(0, 0, 0, .3)',
          // shadowBlur: 0,
          // shadowOffsetY: 2,
          // shadowOffsetX: 2,
        },
        lineStyle: {
          normal: {
            color: '#D0DEEE',
            // shadowColor: 'rgba(255, 255, 255, 0.8)',
            // shadowBlur: 0,
            // shadowOffsetY: 5,
            // shadowOffsetX: 5,
          },
        },
        zlevel: 12,
        data: paymentAmountList,
      },
      {
        name: '实付金额',
        type: 'line',
        smooth: false, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 15,
        itemStyle: {
          color: 'transparent',
          borderColor: 'rgba(255,255,255,0.3)',
          borderWidth: 1,
          // borderDashOffset: 1,
          shadowColor: 'rgba(0, 0, 0, .3)',
          // shadowBlur: 2,
          // shadowOffsetY: 2,
          // shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        zlevel: 12,
        data: paymentAmountList,
      },
    ],
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const initChart = () => {
    const char = document.getElementById('myChart2');
    if (char) {
      charEle = echarts.init(char);
      chartRef.current = charEle;
      charEle.setOption(option as any);
      echartsResize(charEle as any);
    }
  };

  useEffect(() => {
    initChart();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);

  return (
    <div className="day_revenue_data">
      <div className="title">
        <ChartTitle title="日营收统计" />
        <img className="polyline" src="/visual/lineBar.svg" alt="" />
        <img className="diamond" src="/visual/bigRectangle.svg" alt="" />
      </div>
      <div id="myChart2" className="chart" ref={chartRef} />
    </div>
  );
}
